import React from 'react';
import { Button, Tooltip } from 'antd';
import {
  newMaterialLibraryUrl,
  newMaterialCategoryUrl,
  newCustomMaterialUrl,
  deleteUrl,
} from '../../icons';

interface ToolButtonsProps {
  onAdd: () => void;
  onDelete: () => void;
  selectedKey: string | null;
}

const ToolButtons: React.FC<ToolButtonsProps> = ({
  onAdd,
  onDelete,
  selectedKey,
}) => (
  <div className='flex gap-3 mt-3 mb-1'>
    <Tooltip title='新建材料库'>
      <Button
        icon={
          <img
            src={newMaterialLibraryUrl}
            alt='新建材料库'
            className='w-5 h-5'
          />
        }
        size='small'
      />
    </Tooltip>
    <Tooltip title='新建材料分类'>
      <Button
        icon={
          <img
            src={newMaterialCategoryUrl}
            alt='新建材料分类'
            className='w-5 h-5'
          />
        }
        size='small'
      />
    </Tooltip>
    <Tooltip title='新建自定义材料'>
      <Button
        icon={
          <img
            src={newCustomMaterialUrl}
            alt='新建自定义材料'
            className='w-5 h-5'
          />
        }
        size='small'
        onClick={onAdd}
      />
    </Tooltip>
    <Tooltip title='删除'>
      <Button
        icon={
          <img
            src={deleteUrl}
            alt='删除'
            className='w-5 h-5'
          />
        }
        size='small'
        onClick={onDelete}
        disabled={!selectedKey}
      />
    </Tooltip>
  </div>
);

export default ToolButtons;
